$color-bar: #e4e4e7;

@mixin custom-scroll-bar($width, $color: $color-bar, $visible: false) {
  @if (not $visible) {
    scrollbar-gutter: stable;
  }
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: $width;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
  }
  &::-webkit-scrollbar-thumb {
    @if ($visible) {
      background-color: $color;
    } @else {
      background-color: transparent;
    }
    border-radius: calc(infinity * 1px);
    transition: background-color 1s ease !important;
  }
}

.sider-menu-scroll-bar {
  @include custom-scroll-bar(6px);
}
.content-scroll-bar {
  @include custom-scroll-bar(10px, $visible: true);
}
